<?php
require_once("config.php");
?>
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
 	<script src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript">
	$("document").ready(function()
	{
		$(".js-ajax-php-json").submit(function()
		{
			var data = { 
				"action":"test"
			};
		
			data = $(this).serialize() + "&" + $.param(data);
		
			$.ajax(
			{
				type: "POST",
				dataType: "json",
				url: "json.php",
				data: data,
				success: function(data)
				{
					$(".the-return").html(
						"username: " + 		data["username"] + 
						"<br />password: " + data["password"] + 
						"<br />Gender: " + 				data["gender"] + "<br />JSON: " + 
														data["json"]);
				
					//alert("Form submitted successfully.\nReturned json: " + data["json"]);
				
				}
			});
	
			return false;
	
		});
	});
	</script>
</head>
<body>

<form action="json.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="text" name="username" value="" placeholder="username" />
  <input type="password" name="password" value="" placeholder="password" />
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <input type="submit" name="submit" value="Login"  />
</form>
 
<div class="the-return">
  [HTML is replaced when successful.]
</div>
 
</body>
</html>
